$(function() {
    // 1.0 获取分类列表数据
    function getArticle_category() {
        $.get("/admin/category/list", function(res) {
            console.log(res);
            // 获取数据
            const list = res.data;
            // 拼接模板
            const trHtml = template('art_list', { list });
            // 渲染模版 
            $(".category_table tbody").html(trHtml);
        })
    }

    // 2 新增-分类-保存
    $(".btn_opt_add").click(function() {
        // 2.1 获取表单的数据 
        const name = $("input[name='name']").val().trim();
        const slug = $("input[name='slug']").val().trim();
        if (!name || !slug) {
            layer.msg('名称和别名不能为空');
            // 弹出提示用户 
            return;
        }
        // 2.2 发送请求
        $.post("/admin/category/add", { name, slug }, function(res) {
            // 恭喜用户
            layer.msg('新增成功');
            // 2.3 清空表单
            $("input[name='name']").val("");
            $("input[name='slug']").val("");
            // 2.4 关闭模态框  bootstrap 
            $("#myModal").modal("hide");
            // 2.5 获取最新的数据
            getArticle_category();
        })
        $(".btn_opt_edit").click(function() {
            // 2.1 获取表单的数据 
            const name = $("input[name='name']").val().trim();
            const slug = $("input[name='slug']").val().trim();
            $.post("/admin/category/add", { name, slug }, function(res) {
                // 恭喜用户
                layer.msg('新增成功');
                // 2.3 清空表单
                $("input[name='name']").val("");
                $("input[name='slug']").val("");
                // 2.4 关闭模态框  bootstrap 
                $("#myModal").modal("hide");
                // 2.5 获取最新的数据
                getArticle_category();
            })
        })
    })

    // 3 编辑 
    // 动态生成的数据 
    // 事件委托！！ 
    // 3.1 通过js的方式来显示 模态框
    // 3.2 获取被点击按钮的身上的属性 data-item
    // 3.3 将数据 设置到 模态框中 
    $('.category_table').on('click', ".edit", function() {
        // 3.1 通过js的方式来显示 模态框
        $("#editModal").modal("show");

        // 3.2 获取被点击按钮的身上的属性 data-item (data-id)
        const item = $(this).data('item');

        // 3.3 将数据 设置到 模态框中 
        $('#name').val(item.name)
        $('#slug').val(item.slug)
        $('#editModal').data('id', item.id)
        console.log(item.id);
    })

    $('.btn_opt_edit').click(function() {
        // 4.1 获取表单的内容
        const temp = {
            name: $('#name').val(),
            slug: $('#slug').val(),
            id: $('#editModal').data("id")
        };
        // 4.2 发送请求 完成 编辑
        $.post("/admin/category/edit", temp, function(res) {
            layer.msg('编辑成功');
            // 4.3 清空表单
            $('#name').val("");
            $('#slug').val("");
            $('#editModal').data("");
            // 4.4 关闭 编辑 模态框
            $("#editModal").modal("hide");
            // 4.5 发送 渲染最新数据
            getArticle_category();
        })
    })

    // 5 删除按钮
    $(".category_table").on("click", ".delete", function() {
        // 5.1 先弹出窗口询问用户  是否要删除 
        layer.confirm("您确定删除吗", { title: "提示" }, (index) => {
            // 5.2 获取被删除的数据 id 
            const id = $(this).data("id");
            console.log(id);
            // 5.3 拼接参数 发送给后台 完成删除
            $.post("/admin/category/delete", { id }, function(res) {
                // 5.4 删除成功了  获取最新数据
                getArticle_category();
                // 5.5 关闭询问框
                layer.close(index);
            })
        })
    })



    // 调用函数
    getArticle_category();
})